import React, { useState, useEffect } from 'react';
import { obj_str, Ret, is_empty, useHigh, GridTable, useCmd, WaitUmd, MainView, Title, PanelTitle, loc } from 'sui';
import { load_ng } from './cmd';
import { show_val } from '../task/cmd';

const InfoView = ({ cur, hreturn }) => {
    const [main, setMain] = useState();
    const [map_ng, mapNg] = useState();
    const [high] = useHigh(140, 100);
    const umd = useCmd();

    useEffect(() => {
        load_ng(null, mapNg);
    }, []);

    useEffect(() => {
        if (!cur) {
            return;
        }

        const data = cur.v;
        if (is_empty(data)) {
            setMain(null);
            return;
        }

        data.forEach((d, i) => d["index"] = i + 1);

        setMain(data);
    }, [cur]);

    const col = [
        {name: loc("l_193"), key: 'index', width: 70},
        {name: loc("l_127"), key: 'num', width: 70},
        {name: loc("l_811"), key: 'ngson', width: 300, formatter: (props) => show_val(props, "ngson", map_ng)},
    ];

    const Right = () => (
        <div className="inline-flex">
            <Ret hcmd={hreturn}/>
        </div>
    );

    const Left = () => <Title mod={obj_str(cur, "sn")} sub={loc("l_887")}>{loc("l_575")}</Title>;

    return (
        <MainView>
            <PanelTitle left={<Left/>} right={<Right/>} cl="gray"/>
            <GridTable col={col} row={main} high={high}/>
            <WaitUmd umd={umd}/>
        </MainView>
    );
};

export {InfoView};
